import logo from './logo.svg';
import './App.css';
import './Button.css'
import { useState } from 'react';
import { Link } from 'react-router-dom';

function App() {
  const [btnCont, setBtnCont] = useState(0);//状态监听
  function handleClick() {
    setBtnCont(btnCont + 1)
  }
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <Button />
        <Button2 btnCont={btnCont} btnClick={handleClick} />
        <Button2 btnCont={btnCont} btnClick={handleClick} />
        <Button3 page={'/rookieCi'} />
      </header>
    </div>
  );
}
function Button() {
  const [btnCont, setBtnCont] = useState(0);//状态监听
  function handleClick() {
    setBtnCont(btnCont + 1)
  }
  return btnCont === 0 ? <button className="Button" onClick={handleClick}>点这儿看看</button>
    : <button className="Button" onClick={handleClick}>消息{btnCont}</button>
}
function Button2({ btnCont, btnClick }) {
  return btnCont === 0 ? <button className="Button" onClick={btnClick}>点这儿看看</button>
    : <button className="Button" onClick={btnClick}>消息{btnCont}</button>
}
function Button3({ page }) {
  return <Link to={page}>跳</Link>//这个路由实际上是<a>标签
}
export default App;
